<template>
  <div>
    <el-form ref="deptForm" :model="deptForm" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="deptForm.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="deptForm.manager" style="width:80%" placeholder="请选择">
          <!-- el-option的value属性,选哪个获取哪个 -->
          <el-option v-for="item in employee" :key="item.id" :value="item.username" :label="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="deptForm.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
        <el-button size="small" @click="hCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getEmployeeSimpleAPI, addDepartmentsAPI, getDepartDetailAPI, updateDepartments } from '@/api/departments'
export default {
  name: 'DeptDialog',
  props: {
    parentId: {
      type: [Number, String],
      required: true
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    originList: {
      type: Array,
      required: true
    }
  },

  data() {
    // 自定义校验规则

    // 校验部门编码是否重复
    const validCode = (rule, value, callback) => {
      // 把传过来的数组,再次映射,整理出所有的code,返回一个只是code的新数组
      let existCodeList = this.originList.map(item => item.code)

      // 判断点击的是编辑
      if (this.isEdit) {
        // 排除自己,然后再映射出只是code的数组
        existCodeList = this.originList.filter(item => item.id !== this.parentId).map(item => item.code)
      }

      // 然后判断当前部门编码是否重复,用数组的includes方法,这个方法返回布尔值
      existCodeList.includes(value) ? callback(new Error(`当前部门编码 ${value} 已存在`)) : callback()
    }

    // 校验部门名称是否重复
    const validName = (rule, value, callback) => {
      // 筛选出同一级部门,然后把部门名称映射出来,返回一个只是name的新数组
      let existNameList = this.originList.filter(item => item.pid === this.parentId).map(item => item.name)

      // 如果点击的是编辑
      if (this.isEdit) {
        // 找到当前编辑的这个部门,取出pid
        const dept = this.originList.filter(item => item.id === this.parentId)
        const pid = dept.pid

        // 用pid找出同级,并将自己排除,然后赋值给existNameList
        existNameList = this.originList
          .filter(item => item.pid === pid && item.id !== this.parentId) // 排除自己用 !==
          .map(item => item.name)
      }

      // 然后判断当前部门名称是否重复,用数组的includes方法,这个方法返回布尔值
      existNameList.includes(value) ? callback(new Error(`当前部门名称 ${value} 已存在`)) : callback()
    }
    return {

      // 表单数据
      deptForm: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },

      // 项目负责人数据
      employee: [],

      // 表单校验规则
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
          { validator: validName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' },
          { validator: validCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择部门负责人', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
        ]

      }
    }
  },

  created() {
    // 调用获取项目负责人数据方法
    this.getEmployeeSimple()
    // 调用获取当前部门详情方法
    this.getDepartDetail()
  },

  methods: {

    // 新增部门方法
    async addDepart() {
      // 点确定调用新增接口,并传需要的参
      await addDepartmentsAPI({ ...this.deptForm, pid: this.parentId })// 参数是个对象,需要拼接,后台要求pid

      // 成功提示框
      this.$message.success('添加成功')

      // 子派发父监听
      this.$emit('update-depart')
    },

    // 编辑部门方法
    async editDepart() {
      // 点确定调用编辑接口,并传需要的参
      await updateDepartments(this.parentId, this.deptForm)// 参数是个对象,需要拼接,后台要求pid

      // 成功提示框
      this.$message.success('编辑成功')

      // 子派发父监听
      this.$emit('update-depart')
    },

    // 确定按钮
    hSubmit() {
      // 兜底验证
      this.$refs.deptForm.validate((valid) => {
        // 验证不通过
        if (!valid) return

        // 根据isEdit判断,选择对应的方法
        this.isEdit ? this.editDepart() : this.addDepart()
      })
    },

    // 取消按钮
    hCancel() {
      this.$emit('close')
    },

    // 获取项目负责人数据
    async getEmployeeSimple() {
      // 调接口那数据
      const res = await getEmployeeSimpleAPI()

      // 赋值数据,方便循环渲染页面
      this.employee = res.data
    },

    // 获取当前部门详情
    async getDepartDetail() {
      // 点击的是编辑
      if (this.isEdit) {
        // 调用当前部门接口,获取数据
        const res = await getDepartDetailAPI(this.parentId)
        // 数据回填
        this.deptForm = res.data
      }
    }
  }

}
</script>

<style>

</style>
